body {
    background: #000;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 400px;
  }
  
  div {
    position: absolute;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  
  $stepWidth: 150px;
  $stepDepth: 37px;
  $stepHeight: 20px;
  $pillarWidth: 100px;
  
  #window {
    width: 300px;
    height: 400px;
    
    .panel {
      &_frame {
        $offsetX: 225px;
        $offsetY: 302px;
        $borderWidth: 150px;
        top: -$borderWidth;
        left: -$borderWidth;
        width: 300px - $offsetX;
        height: 400px - $offsetY;
        border: $borderWidth solid black;
        box-sizing: content-box;
        transform: translate3d($offsetX / 2, $offsetY / 2, 300px);
        border-radius: 152px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) inset;
      }
      &_back {
        width: 1000px;
        height: 1200px;
        background: linear-gradient(220deg, rgba(255, 255, 255, 1) 0%, rgba(150, 150, 150, 1) 100%);
        transform: translate3d(-50%, -50%, -250px);
      }
    }
    
    .pillar {
      width: $pillarWidth;
      height: 400px;
      background: linear-gradient(220deg, rgba(240, 240, 240, 1) 0%, rgba(150, 150, 150, 1) 100%);
      overflow: hidden;
      .ref {
        left: 45%;
        width: 45%;
        height: 100%;
        background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.2) 100%); 
        transform: translateZ(1px);
        filter: blur(12px);
        mix-blend-mode: screen;
      }
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.1) 10%, rgba(255, 255, 255, 0) 50%);
      }
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(300deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 31%);
      }
    }
    
    .wall {
      width: $stepWidth + 9;
      height: 400px;
      background: linear-gradient(220deg, rgba(240, 240, 240, 1) 0%, rgba(100, 100, 100, 1) 100%);
      transform: translate($pillarWidth, 256px);
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, rgba(100, 100, 100, 0.1) 0%, rgba(255, 255, 255, 0) 5%);
      }
    }
    
    .step {
      transform: rotateY(-50deg);
      &_inner {
        transform: translateX(99.4px);
      }
      &_top {
        width: $stepWidth;
        height: $stepDepth;
        background: linear-gradient(220deg, rgba(240, 240, 240, 1) 0%, rgba(150, 150, 150, 1) 100%);
        transform-origin: 0 100%;
        transform: translateY(-$stepDepth) rotateX(90deg);
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(-20deg, rgba(200, 200, 200, 0.4) 0%, rgba(100, 100, 100, 0.6) 100%);
          clip-path: polygon(
            0 0,
            100% 0,
            92% 60%,
            30% 100%,
            0 100%
          );
        }
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 50%;
          height: 100%;
          opacity: 0;
          background: linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
          transform: translate3d(-100%, 0, -1px);
        }
      }
      &_side {
        width: $stepWidth;
        height: $stepHeight;
        background: linear-gradient(195deg, rgba(200, 200, 200, 1) 0%, rgba(100, 100, 100, 1) 100%);
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 1);
          opacity: 1;
          transform: translateZ(1px);
        }
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 50%;
          height: 100%;
          opacity: 0;
          background: linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
          transform: translate3d(-100%, 0, -1px);
        }
      }
      @for $i from 1 through 100 {
        &:nth-child(#{$i}) {
          animation: stepAnimation 10000ms $i * -500ms linear infinite;
          .step_side {
            &::before {
              animation: stepColor 10000ms $i * -500ms linear infinite;
            }
            &::after {
              animation: stepRefrection 10000ms $i * -500ms linear infinite;
            }
          }
          .step_top {
            &::before {
              animation: stepShadow 10000ms $i * -500ms linear infinite;
            }
            &::after {
              animation: stepRefrection 10000ms $i * -500ms linear infinite;
            }
          }
        }
      }
    }
  }
  
  @keyframes stepAnimation {
    0% {
      transform: translateY(0) rotateY(90deg);
    }
    100% {
      transform: translateY(400px) rotateY(-90deg);
    }
  }
  
  @keyframes stepColor {
    0% {
      opacity: 1;
    }
    60% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes stepRefrection {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes stepShadow {
    0% {
      clip-path: polygon(
        0 0,
        100% 0,
        0% 40%,
        30% 100%,
        0 100%
      );
    }
    100% {
      clip-path: polygon(
        0 0,
        100% 0,
        125% 80%,
        60% 100%,
        0 100%
      );
    }
  }